<template>
  <div>
    <div class="divbox">
      <div class="headeruser">
        <div>
          <van-icon
            @click="$router.push('/home')"
            class="threeone"
            name="arrow-left"
          />
        </div>
        <div>
          <span>我的知心Go</span>
        </div>
        <div><van-icon class="three" name="ellipsis" /></div>
      </div>
    </div>

    <div class="headerusertwo">
      <div>
        <span class="a-user" @click="$router.push('/profile')">
          <a><van-icon name="setting-o" /></a>管理系统</span
        >
      </div>
      <div class="box-user">
        <div>
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
        </div>
        <div>
          <span>{{ list.username }}</span>
          <span>用户名:{{ list.username }}</span>
        </div>
      </div>
    </div>

    <div class="category">
      <div>
        <van-icon name="gold-coin-o" />
        <span>待付款</span>
      </div>
      <div>
        <van-icon name="gold-coin-o" />
        <span>待收货</span>
      </div>
      <div>
        <van-icon name="gold-coin-o" />
        <span>已完成</span>
      </div>
      <div>
        <van-icon name="gold-coin-o" />
        <span>全部订单</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getSliders } from "../../../network/routerheader";
// import {setuserinfo} from 'vuex'
import store from "../../../store/index";
// import axios from 'axios'
export default {
  created() {
    this.getItem();
  },

  data() {
    return {
      list: [],
    };
  },
  methods: {
    // ...mapMutations(['setuserinfo']),
    async getItem() {
      //  this.list=store.getters.getuserinfo.userinfo
      const res = await this.$require({
        url: "/user/info",
        method: "get",
      });
      // this.setuserinfo({userinfo:res.data.data})
      if (res.status == 200) {
        this.list = res.data.data;
        //   console.log(this.list);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.divbox{
  display: block;
  width: 375px;
}
.a-user {
  padding-left: 100px;
}
.headeruser {
  height: 48px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  div {
    flex: 1;
    font-size: 18px;
    color: #000000;
    margin: 10px 0px;
    width: 127px;
    .three {
      font-size: 26px;
      margin-left: 60px;
      font-weight: bold;
    }
    .threeone {
      font-weight: bold;
      font-size: 20px;
    }
    span {
      display: block;
    }
  }
}

.headerusertwo {
  width: 309.5px;
  height: 78px;
  padding: 10.6px 10px;
  margin: 48px auto;
  background-color: #eb3c3c;
  border-radius: 5px;
  .a-user {
    float: right;
    color: #4c0000b3;
    font-size: 13px;
    padding: 0 10px;
    .van-icon {
      padding: 0 5px;
    }
  }
}
.box-user {
  width: 322px;
  // height: 5px;
  padding: 5px 0;
  div {
    float: left;
    .van-icon {
      font-size: 60px;
    }
    span {
      font-size: 13px;
      color: #ffffffb3;
      display: block;
      margin-top: 10px;
    }
  }
}
.category {
  display: flex;
  width: 365.2px;
  height: 75px;
  text-align: center;
  div {
    flex: 1;
    .van-icon {
      font-size: 25px;
    }
    span {
      display: block;
      width: 93px;
      text-align: center;
      font-size: 12px;
      color: #000000;
    }
  }
}
</style>